<template>
  <div class="container">
    <!-- 轮播图 -->
    <div class="rotation-chat"> 
        <a-carousel :after-change="onChange">
            <div><img alt="" src="@/assets/轮播图1.png"/></div>
            <div><img alt="" src="@/assets/轮播图2.png"/></div>
            <div><img alt="" src="@/assets/轮播图3.png"/></div>
            <div><img alt="" src="@/assets/轮播图4.png"/></div>
        </a-carousel>
    </div>
    

    <div class="body">
    <!-- 新闻与活动 -->
    <div class="new-activity">新闻与活动</div>
    <!-- 蓝条 -->
    <div class="blue-bar"></div>
    <!-- 新闻资讯,活动通知 -->
    <div class="news-activity">
       <button class="news-information">新闻资讯</button> 
       <button class="activity-notification">活动通知</button> 
    </div>
    <!-- 新闻与活动 -->
    <div class="content">
        <div class="text-box" v-for="(text,index) in texts" :key="'a' +index">
            <div class="xiao-box">
                <div>
                    <img style="width:360px: height:200px" alt="" :src="text.url">
                </div>
                <div class="text-name1">{{text.types}}</div>
                <div class="text-name">{{text.type01}}</div>
                <div class="text-type">{{text.type02}}</div>
            </div>
        </div>
    </div>
    <div class="button"><button>更多资讯</button></div>
</div>

    
    <div class="body1">
    <!-- 平台与资源 -->
    <div class="platform-resources">平台与资源</div>
    <!-- 蓝条 -->
    <div class="blue-bar1"></div>
    <!-- 多年经验沉淀,汇聚行业、企业、院校专家与一线教师协力打造 -->
    <div class="body1-word">多年经验沉淀,汇聚行业、企业、院校专家与一线教师协力打造</div>
    <!-- 平台与资讯图 -->
    <div class="platform-body">
        <div class="good-box1" v-for="(good,index) in goods" :key="'a' +index">
    <!-- platform图1 -->
        <div class="box1">
            <div><img alt="" style="width: 109px;height: 87px;margin-top:50px" :src="good.url"></div>
            <div class="platform-word1">{{good.word1}}</div>
            <div class="platform-word2">{{good.word2}}</div>
            <div><button onmouseover ="this.style.backgroundColor = '#2e71fe';this.style.color = 'white';"
            onmouseout="this.style.backgroundColor = 'white';this.style.color = '#2e71fe'" 
            class="platform-word3">{{good.word3}}</button></div>
        </div>
        </div>
    </div>
    </div>
 

    <div class="body2">
    <!-- 整体解决方案 -->
    <div class="solution">整体解决方案</div>
    <!-- 蓝条 -->
    <div class="blue-bar2"></div>
    <!-- 助力职业院校新一代信息技术专业群建设,高级能人才培养 -->
    <div class="body2-word2">助力职业院校新一代信息技术专业群建设,高级能人才培养</div>
    <!-- 导航栏 -->
    <div class="contaion">
    <div class="navigation">
        <div class="nav-box1" :class="ter[index]" v-for="(nav,index) in navs" :key="'a' +index">
             <div style="display:flex">
     <!--  onmouseover ="this.style.backgroundColor = '#2e71fe';this.style.color = 'white';"
     onmouseout="this.style.backgroundColor = '#f9f9f9';this.style.color= 'black'"  -->
            <div class="box2">
                <div class="navigation-title1">{{nav.title1}}</div>
    <!-- 三角 -->
            </div>
                <div class="triangle"></div>
        </div>
        </div>
    </div>
    <div class="navigation-right">
    <!-- 中国特色企业新型学徒制     -->
    <div class="navigation-title2" >中国特色企业新型学徒制</div>
    <!-- 虚线 -->
    <div class="dotted-line"></div>
    <!-- title3 -->
    <div class="navigation-title3">以深化企业改革、加大技能人才培养为宗旨，以满足培育壮大发展新动能、促进产业转型升级和提高企业竞争力为根本，以产教融合、校企合作为重要手段,持续实施职业技能提升行动,面向企业全面推行新型学徒制培训,创新中国特色技能人才培养模式,进一步矿大技能人才培养规模,为实现高质量发展提供有力的人才喝技能支撑.</div>
    <div style="display:flex;margin-top:44px">
        <div class="title-box">学生职业发展</div>
        <div class="title-box1">教师能力提升</div>
        <div class="title-box1">对外项目合作</div>
    </div>
    <div class="liaojie">了解更多</div>
    </div>
    </div>
    </div>


    <!-- 背景图 -->
    <div class="background-image">
    <div class="body3">
    <!-- 整体解决方案 -->
    <div class="case">服务全国400+客户的院校案例</div>
    <!-- 蓝条 -->
    <div class="blue-bar3"></div>
    <!-- 助力职业院校新一代信息技术专业群建设,高级能人才培养 -->
    <div class="body3-word3">完善的培训学习体系为院校搞技能人才培养保驾护航</div>
    <!-- 院校案例 -->
    <div class="logo-body">
        <div class="logo-box1" v-for="(logo,index) in logos" :key="'a' +index">
    <!-- logo图1 -->
        <div class="box3">
            <div class="box3-picture" >
            <img alt="" style="width: 40px;height: 40px;" :src="logo.url"></div>
            <div style="width:115px;height:70px">
                <div class="logo-zi1">{{logo.zi1}}</div>
                <div class="logo-zi2">{{logo.zi2}}</div>
            </div>
        </div>
        </div>
    </div>
    <!-- logo墙 -->
    <div class="logo-qiang"><img alt="" src="@/assets/logo墙.png"/></div>
  </div>
  </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
        texts:[
            {
            url:require('@/assets/新闻与活动1.png'),
            types:'人社部印发通知加强新职业培训工作通知',
            type01:'为加快培养大批高素质劳动者和技术技能人才，改善新职业人才供给质量结构，支持战略性新...',
            type02:'2021-08-23'
        },{
            url:require('@/assets/新闻与活动2.png'),
            types:'人社部印发通知加强新职业培训工作通知',
            type01:'为加快培养大批高素质劳动者和技术技能人才，改善新职业人才供给质量结构，支持战略性新...',
            type02:'2021-08-23'
        },{
            url:require('@/assets/新闻与活动3.png'),
            types:'人社部印发通知加强新职业培训工作通知',
            type01:'为加快培养大批高素质劳动者和技术技能人才，改善新职业人才供给质量结构，支持战略性新...',
            type02:'2021-08-23'
        }
       ],
       goods:[
           {
            url:require('@/assets/实训平台.png'),
            word1:'实训平台',
            word2:'云计算、大数据、人工智能教学实训评测竞赛一体化平台',
            word3:'了解详情',
            backgroundColor:"blue"
        },
        {
            url:require('@/assets/竞赛平台.png'),
            word1:'实训平台',
            word2:'对接全国职业院校技能大赛"云计算"赛项标准,支持混合云竞赛模式',
            word3:'了解详情'
        },
        {
            url:require('@/assets/云管平台.png'),
            word1:'云管平台',
            word2:'公有云.私有云服务器组集群管理',
            word3:'了解详情'
        },
        {
            url:require('@/assets/课程资源.png'),
            word1:'课程资源',
            word2:'七大专业方向课程体系220门模块课程课件、视频、教材、实验、评测',
            word3:'了解详情'
        }
       ],
       navs:[
           {
            title1:'综合实训基地',
            ter:'s1'
        },
        {
            title1:'中国特色企业新型学徒制',
            ter:'s2'
        },
        {
            title1:'职业技能培训',
        },
        {
            title1:'华为鲲鹏教育项目',
        },
        {
            title1:'"双师"队伍建设',
        },
        {
            title1:'资源库/教材开发',
        },
       ],
       ter:['s1','s2'],
       logos:[
           {
            url:require('@/assets/合作院校.png'),
            zi1:'400+',
            zi2:'合作院校',
        },
         {
            url:require('@/assets/模块化课程.png'),
            zi1:'200+',
            zi2:'模块化课程',
        },
         {
            url:require('@/assets/教材开发.png'),
            zi1:'50+',
            zi2:'教材开发',
        },
         {
            url:require('@/assets/师资培训.png'),
            zi1:'1600+',
            zi2:'师资培训',
        },
       ]
    };
  },
  created() {},
  methods: {
      handleChange(value) {
      console.log(`selected ${value}`);
    },
    onChange(a, b, c) {
      console.log(a, b, c);
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.container{
    margin: auto;
    justify-content: center;
}
.rotation-chat{
    width: 1920px;
    height: 420px;
    margin:auto;
    justify-content: center;
}
.body{
    width: 1200px;
    margin: auto;
    justify-content: center;
}
.new-activity{
    margin-top: 70px;
    width: 150px;
    height: 34px;
    margin-left: 525px;
    font-size: 25px;
    font-weight:600;
    letter-spacing: 1px;
}
.blue-bar{
    width: 45px;
    height: 2px;
    background-color: #2e71fe;
    margin-left: 570px;
    margin-top: 15px;
}
.news-activity{
    display: flex;
    width: 320px;
    height: 45px;
    margin-left: 440px;
    margin-top: 36px;
}
.news-information{
    width: 160px;
    height: 45px;
    background-color: blue;
    color: rgba(0, 0, 0, 0.65);
    letter-spacing: 1px;
    color: white;
    border: blue;

}
.activity-notification{
    width: 160px;
    height: 45px;
    background-color: #f5f5f5;
    border: white;
}
.content{
    display: flex;
    width: 100%;
}
.text-box{
    justify-content:space-between;
    
    padding: 20px;
}
.xiao-box{
    margin-top: 50px;
    width: 360px;
    height: 360px;
    justify-content:space-between;
}
.xiao-box:hover{
    box-shadow: -2px 2px 10px rgba(0, 0, 0, 0.2);
}
.xiao-box:hover .text-name1{
    color: #2e71fe;
}
.text-name1{
    width: 300px;
    height: 40px;
    color: black;
    letter-spacing: 2px;
    font-size: 16px;
    font-weight: 600;
    margin: 0 auto;
    margin-top: 20px;
}
.text-name{
    margin-top: 20px;
    width: 300px;
    height: 40px;
    margin: 0 auto;
    margin-top: 20px;
}
.text-type{
    margin-left: 30px;
    margin-top: 16px;
}
.button{
    width: 150px;
    height: 40px;
    margin-top: 50px;
    margin-left: 525px;
    color: blue;
    border:1px blue
}
.body1{
    width: 1200px;
    margin: auto;
    justify-content: center; 
    margin-top: 70px;
}
.platform-resources{
    // margin-top: 70px;
    width: 150px;
    height: 34px;
    margin-left: 525px;
    font-size: 25px;
    font-weight:600;
    letter-spacing: 1px;
}
.blue-bar1{
    width: 45px;
    height: 2px;
    background-color: #2e71fe;
    margin-left: 570px;
    margin-top: 15px;
}
.body1-word{
    margin-top: 20px;
    margin-left: 400px;
}
.platform-body{
    width: 1200px;
    height: 380px;
    display: flex;
    justify-content: space-between;
}
.box1{
    width: 280px;
    height: 380px;
    text-align: center;
}
.box1:hover{
    box-shadow: 2px -2px 10px rgba(0, 0, 0, 0.2);
    margin-top: -25px;
}
.platform-word1{
    font-size: 25px;
    font-weight:600;
    margin-top: 35px;
}
.platform-word2{
    width: 170px;
    height: 35px;
    font-size: 10px;
    font-weight:600;
    margin-top: 30px;
    text-indent: 20px;
    text-align: center;
    margin-left: 50px;
}
.platform-word3{
    width: 130px;
    height: 35px;
    margin-top: 45px;
    border: 1px solid #2e71fe;
    color: #2e71fe;
    background-color: #ffffff;
}
.body2{
    width: 1200px;
    margin: auto;
    justify-content: center;    
    // margin-left: 200px;
    margin-top: 50px;
}
.solution{
    margin-top: 70px;
    width: 170px;
    height: 34px;
    margin-left: 525px;
    font-size: 25px;
    font-weight:600;
    letter-spacing: 1px;
}
.blue-bar2{
    width: 45px;
    height: 2px;
    background-color: #2e71fe;
    margin-left: 580px;
    margin-top: 15px;
}
.body2-word2{
    margin-top: 20px;
    margin-left: 415px;
}
.contaion{
    margin-top: 80px;
    width: 100%;
    display: flex;
}
.navigation{
    width: 260px;
    height: 400px;
    background-color: #f9f9f9;
    box-shadow:1px 1px 10px  rgba(0, 0, 0, 0.2);
}
.navigation-title1{
    width: 260px;
    height: 66px;
    text-indent: 40px;
    line-height: 66px;
}
// .nav-box1.s1{
//     background-color: antiquewhite;
// }
.box2:hover + .triangle{
    width: 20px;
    height: 30px;
    border:15px solid transparent;
    border-left:15px solid #2e71fe;
    margin-top: 17px;
}
 .box2:hover {
    background-color: #2e71fe;
    color: #f9f9f9;
}
.navigation-title2{
    color:#2e71fe;
    margin-top: 8px;
    margin-left: 70px;
    font-size: 20px;
    font-weight:600;
}
.navigation-right{
    width: 100%;
}
.dotted-line{
    width: 870px;
    height: 1px;
    border: 1px solid #ced0cf;
    margin-left: 70px;
    margin-top: 32px;
    background-color: #ced0cf;
}
.navigation-title3{
    margin-left: 70px;
    margin-top: 32px;
    font-size: 16px;
    font-weight:600;
}
.title-box{
    width: 148px;
    height: 38px;
    margin-left: 70px;
    background-color: #f9f9f9;
    line-height: 38px;
    text-align: center;
}
.title-box1{
    width: 148px;
    height: 38px;
    margin-left: 70px;
    background-color: #f9f9f9;
    margin-left: 18px;
    line-height: 38px;
    text-align: center;
}
.liaojie{
    width: 150px;height: 40px;
    border: 1px solid #2e71fe;
    color: #2e71fe;
    background-color: white;
    text-align: center;
    line-height: 40px;
    margin-left: 70px;
    margin-top: 70px;
}
.background-image{
    width: 1920px;
    width: 100vw;
    height: 750px;
    margin:auto;
    justify-content: center;
    background-image: url('../../assets/背景.png');
}
.body3{
    width: 1200px;
    margin: auto;
    justify-content: center;    
    // margin-left: 200px;
    margin-top: 50px;
}
.case{
    margin-top: 70px;
    width: 450px;
    height: 34px;
    margin-left: 425px;
    font-size: 25px;
    font-weight:600;
    letter-spacing: 1px;
}
.blue-bar3{
    width: 45px;
    height: 2px;
    background-color: #2e71fe;
    margin-left: 580px;
    margin-top: 15px;
}
.body3-word3{
    margin-top: 20px;
    margin-left: 400px;
    font-size: 17px;
}
.logo-body{
    width: 1200px;
    display: flex;
    justify-content: space-between;
}
.box3{
    width: 250px;
    height: 120px;
    text-align: center;
    // line-height:80px;
    display: flex;
    margin-left: 60px;
    margin-top: 50px;
}
.box3-picture{
    width: 80px;
    height: 80px;
    line-height: 80px;
    border-radius: 50%;
    background-color:white
}
.logo-zi1{
    width: 115px;
    height: 35px;
    font-size: 35px;
    font-weight:700;
    color: #2e71fe;
}
.logo-zi2{
    width: 115px;
    height: 35px;
    font-size: 20px;
    font-weight:600;
    margin-top: 12px;
}
.logo-qiang{
    width: 1200px;
    margin: auto;
    margin-top: 30px;
}


</style>
